<template>
  <div>
    <Modal
      v-model="payBox"
      :closable="false"
      :footer-hide="true"
      :mask-closable="false"
      width="750"
      class-name="vertical-center-modal "
      @on-visible-change="vPayChange"
    >
      <Row :gutter="15">
        <Col :span="3">
          <i class="iconfont cRed f_70 iconxiadanchenggong1"></i>
        </Col>
        <Col :span="15">
          <div class="f_24 marginT10 marginB5 f_bold c333">下单成功，请尽快支付</div>
          <div>
            <span class="c999">订单编号：</span>
            {{orLiInfo.order_no}}
          </div>
          <div>
            <span class="c999">购买服务：</span>
            {{orLiInfo.goods_name}}
          </div>
        </Col>
        <Col :span="6" class="">
          <div class="c999" style="margin-top:65px;">
            我的余额：<span class="f_20 f_bold cBlue" v-show="ioShow">{{ongW()}}</span> 元
          </div>

        </Col>
      </Row>

      <Divider orientation="left" class="marginT10 marginB10 f_16 xowT">支付类型</Divider>
      <div v-show="ioShow">
        
        <Row :gutter="10">
          <Col :span="2">
            <div class="textRight">
              <i class="iconfont icontuijian cRed f_18 relative" style="top:12px;"></i>
            </div>
          </Col>
          <Col :span="22">
          <RadioGroup v-model="radioG" class="width100 ">
            <Radio :label="1" size="large" class="blockCenter width100" >
              <div class="inlineBlock relative radioG">
                <Row :gutter="15">
                  <Col :span="14">
                    <div class="inlineBlock marginR30">
                      <span class="c999">余额支付：</span>
                      <span class="f_20 cRed f_bold ">{{yzKK()}}</span>元
                      <!-- 订单类型,1专利申请,2商标注册,3软著,4美术著作,5商标分析报告,6商标报告-包年,7无流程的商标订单,8无流程的专利订单,9无详情的订单,10无流程的版权订单,11增值服务订单,20充值,21后台充值,22退款 -->
                      <!-- 田志清定：增值服务，11 不显示，括号里的内容~ -->
                      <span v-show="orLiInfo.order_type!=11">
                        （官费 <span class="cRed f_16">{{parseFloat(orLiInfo.official_fee)}}</span>元 + 服务费 <span class="cRed f_16">{{fwfJJ()}}</span>元）
                      </span>
                    </div>
                  </Col>
                  <Col :span="10" >
                    <div v-show="radioG==1 && (owtM()>0) && (fwfJJ()>0)">
                      <div class="inlineBlock marginR10" >
                        <Checkbox v-model="catY" @on-change="catFun" :disabled="jYcatB || radioG!=1"></Checkbox>
                        <span class="c999">使用猫币：</span>
                        <span class="f_20 c333 f_bold">{{owtM()}}</span>
                      </div>
                      <div class="inlineBlock" >
                        <div v-show="!jYcatB && catY">
                          <span class="c999">剩余：</span>
                          <span class="f_20 cRed f_bold">{{overM2}}</span>
                        </div>
                      </div>
                    </div>
                  </Col>
                </Row>
              </div>
            </Radio>
            <div class=" cRed f_14" style="padding-left:29px; " v-show="overM1<0 && radioG==1">余额不足</div>
            <Radio :label="2" size="large" class="blockCenter width100" style="padding-top:10px;">
              <span class="c999 marginR10" style="padding-left:6px;">
                <i class="iconfont iconweixinzhifu1 f_20 relative" style="color: #32ae28;top:1px;"></i>
              </span>
              <span class="f_20 cRed f_bold ">{{yzVV()}}</span>元
              <span >（微信支付金额比余额高出<span class="cRed f_16">{{$app.accSub(yzVV(),yzFF())}}</span>元）</span>

              <div v-show="radioG==2" >
                <div class="pullRight textCenter marginT20" style="width:470px;height:240px;">
                  <div style="width:200px;height:200px;margin:px;">
                    <div v-show="$app.judgeData(rechargeCode)" >
                      <div style="border:1px solid #ccc;">
                        <img :src="rechargeCode" class="width100 height100" />
                        <div class="marginB10 c666">2分钟内有效</div>
                      </div>
                    </div>

                    <div v-show="!$app.judgeData(rechargeCode)" class="cCCC pointer paddingT10"  @click="zLai">
                      <Icon type="md-refresh" class="marginB10 marginT10 cBlue" size="70"/>
                      <div class="textCenter f_24">刷新支付码</div>
                    </div>
                    
                  </div>

                </div>
                <div class="clearfix"></div>
              </div>
              
            </Radio>
            <Radio :label="3" size="large" class="blockCenter width100" style="padding-top:10px;">
              <span class="c999 marginR10" style="padding-left:6px;">
                <i class="iconfont iconzhifubao f_20 relative" style="color: #00aaef;top:1px;"></i>
              </span>
              <span class="f_20 cRed f_bold ">{{yzVV()}}</span>元
              <span >（支付宝支付金额比余额高出<span class="cRed f_16">{{$app.accSub(yzVV(),yzFF())}}</span>元）</span>
              
            </Radio>
            <div class="clearfix"></div>
            <div class="c999" style="margin:30px 0 0 0 ;">*微信支付 / 支付宝 仅用于用户体验，服务猫推荐用余额支付。更优惠哦~</div>
          </RadioGroup>
          </Col>
        </Row>
      </div>
      <div v-show="!ioShow" class="textCenter f_24" style="color:#eee; padding:15px 0;">
        <Icon type="md-refresh" size="36" class="relative" />运算中...
      </div>

      <div class="textRight padding10">
        <Button
          type="default"
          class="marginL20"
          @click="fanhui"
          v-show="!$app.judgeData(noBackBtn)"
        >
          <Icon type="md-arrow-round-back" size="16" class="marginR5 relative cCCC" />返 回
        </Button>
        <Button
          type="primary"
          ghost
          class="marginL20"
          @click="pageTG(1)"
          v-show="!$app.judgeData(noOrderList)"
        >
          <Icon type="md-list-box" size="16" class="marginR5 relative" />订单详情
        </Button>

        <Button type="primary" class="marginL20" @click="btnB" v-show="!(overM1<0) && radioG==1">
          <Icon type="md-checkmark-circle" size="16" class="marginR5 relative" />
          支 付
        </Button>
        <Button type="primary" class="marginL20" @click="btnC" v-show="(overM1<0) && radioG==1">
          <Icon type="logo-yen" size="16" class="marginR5 relative" />
          充 值
        </Button>

      </div>
    </Modal>

    <RechargeBox ref="rechargeBox" :companyAll="companyAll" :userPower="userPower"/>
  </div>
</template>

<style scoped>
.xowT:before {
  width: 0 !important;
}
.radioG {
  width: 600px;
  top: 7px;
  right: -5px;
}
</style>


<script>
import RechargeBox from "@$@/_service/rechargeBox";
export default {
  name: "payBox",
  components: { RechargeBox },
  // noOrderList 不要 详情列表 按钮
  // noBackBtn 不要 返回 按钮
  props: ["noOrderList", "noBackBtn"],
  data() {
    let data = {
      orLiInfo: {}, //订单所有数据

      catY: true, //是否使用猫币支付
      jYcatB: false, //禁用猫币框

      overM1: 0, //剩余余额
      overM2: 0, //剩余猫币
      companyAll: "",
      userPower:''
    };

    let tool = {
      ioShow: false,
      payBox: false, //支付框组件 是否显示
      radioG: 1, //支付类型：1余额，2微信单独支付，3支付宝单独支付
      rechargeCode:'',//微信支付二维码
      timeDown:null,//定时请求器
    };
    return Object.assign(data, tool);
  },
  mounted() {},
  created() {},
  watch: {
    radioG(newVal, oldVal) {
      if(newVal==1){//余额支付
        this.initTime();//初始化倒计时的东西
      }else if(newVal==2){//微信支付
        this.catY=false;//不使用猫币
        this.zLai();
      }else{//支付宝
        this.catY=false;//不使用猫币
        this.alipayFun();//支付宝函数走起
      }
    },
    ioShow(newVal,oldVal){
      let {noOrderList}=this;
      if(newVal && !$app.judgeData(noOrderList)){
        // $app.closeTag({name:'orderList'}); //关闭本页面
      }
    }
  },
  methods: {
    //支付宝函数走起
    alipayFun(){
      let that=this;
      let {
        orLiInfo:{
          id:order_id
        }
      }=this;

      // 清空微信的定时器
      this.initTime(()=>{
        $app.setSession('/index/#/orderList','alipayUrl');
        $app.setSession(2,'alipayType');//1充值，2单笔支付

        $ajax.aliWebPay(order_id,({alipay_url})=>{
          $app.openWindow(alipay_url);
          $app.confirm('支付已完成？','温馨提示',{
            yesText:'已完成',
            yesFun:()=>{
              $app.loading();
              this.payBox=false;//关闭支付框
              $ajax.isPayed(order_id,(buEr)=>{
                if(buEr==true){//充值成功

                  this.needHuiT();
                  
                }else{
                  $app.alert('数据更新中，请稍后刷新页面再试。','温馨提示');
                }
              });
            },
            noText:'否',
            noFun:()=>{
              this.radioG=1;
            }
          });
        });
        
      });
    },
    yzKK(){
      let yzFF=this.yzFF();
      let catY=this.catY;//true使用猫币支付，false不使用
      let out='';
      if(catY){
        let owtM=this.owtM();//猫币
        let fwfJJ=this.fwfJJ();//服务费
        // 猫币-服务费 
        let owx=$app.accSub(owtM,fwfJJ);

        if(owx<0){
          out=$app.accSub(yzFF,owtM);
        }else{
          out=$app.accSub(yzFF,fwfJJ);
        }
        
      }else{
        out=yzFF;
      }
      return out;
    },
    //应支付金额
    yzFF(){
      let {
        orLiInfo,
        orLiInfo:{
          order_money,
          single_pay_fee
        },
        radioG
      }=this;

      let out=0;

      if($app.judgeData(orLiInfo)){
        out=parseFloat(order_money)
      }
      return out;
    },
    //应支付金额
    yzVV(){
      let {
        orLiInfo,
        orLiInfo:{
          order_money,
          single_pay_fee
        },
        radioG
      }=this;

      let out=0;

      if($app.judgeData(orLiInfo)){
        out=$app.accAdd(parseFloat(order_money),parseFloat(single_pay_fee));//加法运算
      }
      return out;
    },
    //服务费计算
    fwfJJ(){
      let {
        orLiInfo,
        orLiInfo:{
          service_fee,
          single_pay_fee
        },
        radioG
      }=this;

      let out=0;

      if($app.judgeData(orLiInfo)){
        out=parseFloat(service_fee)
        
      }
      return out;
    },
    //zLai重新获取二维码
    zLai(){
      let that=this;
      let {
        timeDown
      }=that;
      

      if($app.judgeData(timeDown)){
        clearInterval(timeDown);//清空定时器
        that.timeDown=null;
      }

      this.rechargeCode='';

      //请求支付二维码
      $ajax.wxQrcodePayO(this.orLiInfo.id,({url,order_id})=>{
        this.rechargeCode=url;

        console.log('二维码重新刷了一遍')
        


        //开始定时请求器 3秒钟请求一次
        let time = 40;//40x3 请求2分钟
				//设置定时器 每1秒钟 执行一次
				let timeDown = setInterval(() => {
					

          $ajax.isPayed(order_id,(buEr)=>{
            console.log('剩余 = ',time)
            //time自身减1
            time--;

            if(buEr==true){//支付成功
              
              that.needHuiT(()=>{
                that.initTime();
              });
                  
            }else if(time <= 0){//清空定时器
              that.initTime();
              that.zLai();//到了0的时候重新刷一个二维码
            }else{
              console.log('用户没有扫码 =》 逻辑继续')
            }
            
          });
          
        }, 3000);

        that.timeDown=timeDown;//定时器赋值给全局
      });

    },

    // 支付成功后
    needHuiT(callBack){
      let {
        orLiInfo: {
          goods_name,
          goods_type
        }
      } = this;

      $app.toast('支付成功',true);
      this.payBox=false;//关闭支付框

      callBack instanceof Function && callBack();
      
      this.pageTG(2);//页面跳转

    },

    

    // 支付框初始化所有
    initTime(callBack){
      let that=this;
      let {timeDown}=that;
      that.rechargeCode='';

      console.log('-----------进入清空定时器-----------');
      clearInterval(timeDown);//清空定时器
      that.timeDown=null;
      console.log('-----------清空完毕-----------');
      callBack instanceof Function && callBack();

    },

    //当前余额运算
    ongW() {
      let out = parseFloat(this.companyAll.balance);
      return out;
    },
    //当前猫币
    owtM() {
      let out = parseFloat(this.companyAll.currency);
      return out;
    },
    vPayChange(buEr) {
      if (buEr) {//显示 弹框

        // 全局更新 钱
        $ajax.pInfo(resData => {
          //改变全局的钱
          this.companyAll = resData;

          let judge = resData.currency > 0;

          this.catY = judge;
          this.jYcatB = !judge;

          //猫币支付选择
          this.catFun(judge);
        });

      } else {
        //关闭
        console.log("关闭弹框");
        this.ioShow = false;

        this.initTime();// 支付框初始化所有
        this.radioG=1;
      }
    },
    btnB() {
      let that = this;
      let {
        orLiInfo,
        orLiInfo: { 
          id
        },
        catY
      } = that;

      // 是否使用猫币 支付
      let use_currency = $app.judgeData(catY) ? 1 : 0;

      $ajax.mBalancePay(id, use_currency, () => {//订单支付成功
        this.needHuiT();

      });
    },
    //跳转充值
    btnC() {
      this.$refs['rechargeBox'].rechargeBox=true;//显示弹框
    },

    //默认支付成功后的跳转
    initOkGo() {
      let {
        $route,
        orLiInfo: { order_type }
      } = this;

      //关闭已有页面 同名字的路由，只出现一个
      $app.closeHadPage('orderList', () => {
        $app.closeTag($route); //关闭本页面

        //路由跳转
        this.$router.push({
          name: 'orderList',
          query: {
            order_type
          }
        });
      })
    },

    //页面跳转 1直接跳转订单列表 2支付成功后跳转订单列表
    pageTG(num) {
      
      let that = this;
      this.payBox = false; //关闭弹框
     
      if (num == 1) {
        that.initOkGo();
      } else {
        //支付完成后，自定义，跳去哪里？
        //没有自定义，就，默认也是跳去订单列表
        if (typeof that.payFun === "undefined") {
          that.initOkGo();
        } else {
          that.payFun(); //执行自定义
        }
      }
    },

    //返回按钮
    fanhui() {
      let that = this;
      this.payBox = false; //关闭弹框

      //没有自定义，就，默认也是跳去订单列表
      if (typeof that.backFun === "undefined") {
        console.log("纯粹返回,毛线都不做了");
      } else {
        that.backFun(); //执行自定义
      }
    },

    //猫币支付选择
    catFun(buEr) {
      this.ioShow = true; //显示金额框
      if (!!buEr) {
        //使用猫币支付
        //剩余 余额，猫币 判断

        // 用户猫币-订单猫币= 小于零（从余额里扣除），大于零 或 等于零（直接从猫币里扣除）
        let pp = $app.accSub(
          parseFloat(this.companyAll.currency),
          parseFloat(this.orLiInfo.service_fee)
        ); //猫币
        let zz = $app.accSub(
          parseFloat(this.companyAll.balance),
          parseFloat(this.orLiInfo.official_fee)
        ); //余额

        if (pp < 0) {
          //小于零（从余额里扣除)
          this.overM2 = 0; //剩余 猫币
          this.overM1 = $app.accAdd(zz, pp); //剩余 余额
        } else {
          //大于零 或 等于零（直接从猫币里扣除）
          this.overM2 = pp; //剩余 猫币
          this.overM1 = zz; //剩余 余额
        }
      } else {
        //不使用猫币支付
        this.overM2 = parseFloat(this.companyAll.currency); //剩余 猫币
        this.overM1 = $app.accSub(
          parseFloat(this.companyAll.balance),
          parseFloat(this.orLiInfo.order_money)
        ); //剩余 余额
      }
    }
  }
};
</script>

